<template>
    <Transition name="fade">
    <div class="header-detail">
        <div class="detail-wrapper">
            <div class="detail-main">
                <div class="name">
                    {{ seller.name }}
                </div>
                <div class="star-wrapper">
                    <van-rate v-model="foodScore" readonly allow-half 
                    :size="25"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"/>
                </div>
                <div class="title">
                    <span>优惠信息</span>
                </div>
                <ul class="support1">
                    <li v-if="seller.supports" v-for="(support, index) of seller.supports" :key="index">
                        <div class="support">
                        <SupportIcon :type="support.type" size="2"/>
                        <span class="text">{{ support.description }}</span>
                        </div>
                    </li>
                    </ul>
                <div class="title">
                    <span>商家公告</span>
                </div>
                <div class="bulletin">
                    <p class="content">
                        {{ seller.bulletin }}
                    </p>
                </div>
            </div>
        </div>


        <div class="detail-close" @click.stop="close">
            <i class="iconfont icon-colse"></i>
        </div>
    </div></Transition>
</template>

<script setup>
import SupportIcon from '@/components/support-ico/index.vue'
import {ref,defineProps, computed,onMounted,watch} from 'vue'
import { Rate } from 'vant';

const props = defineProps({
  seller: {
    type: Object,
    default: () => ({})
  }
})

const foodScore = ref(props.seller.score || 0);

watch(() => props.seller.score, (newScore) => {
  foodScore.value = newScore;
});

let fontwidth = computed(() => `width:${props.seller.score}em;`);

const emits = defineEmits(['hide'])//创建事件

const close = () =>{
    emits('hide',false); // 发布了一个事件
}

</script>

<style lang="less" scoped>
@import 'src/assets/variable.less';


    .header-detail{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: @color-background-s;
        color: @color-white;
        z-index: 100;
        backdrop-filter: blur(10px);
        &.fade-enter-from,
        &.fade-leave-to{
            opacity: 0;
            background: @color-background;

        }
        &.fade-enter-active,
        &.fade-leave-active{
            transition: all 0.5s ease;


        }
    }
    .detail-wrapper{
        width: 100%;
        min-height: 100%;
        overflow:auto;
        .detail-main{
            margin-top: 64px;
            padding-bottom: 64px;
            .name{
                text-align: center;
                font-size: @fontsize-large;
                font-weight: bold;
            }
            .star-wrapper{
                padding: 2px 0;
                margin-top: 8px;
                text-align: center;

            }
            .title{
                width: 80%;
                margin: 28px auto 24px auto;
                text-align: center;
                display: flex;
                align-items: center;
                &::before,
                &::after{
                    content: '';
                    height: 1px;
                    background-color: #fff;
                    flex: 1;
                    opacity: 0.3;
                }
                span{
                    font-size: @fontsize-medium;
                    padding: 0 12px;
                    font-weight: bold;
                }
            }
            .star-wrapper{
                display: block;
                position: relative;
                color:@color-red;
                &span{
                    letter-spacing: 3px;
                &hollow{
                    position: absolute;
                    display: block;
                    top: 0;
                    left: 0;
                    width: 0;
                    overflow: hidden;
                }
               }
               
            }
            .support1{
                width: 80%;
                margin: 28px auto 24px auto;
                text-align: center;
                display: block;
                align-items: center;
                
                .support    {
                    display: block;
                    text-align: left;
                    .text{
                    font-size: @fontsize-large;
                    top: 0;
                    
                    }
                }
            }
            .bulletin{
                width: 80%;
                margin: 28px auto 24px auto;
                text-align: center;
                display: block;
                align-items: center;
                .content{
                    text-align: left;
                    font-size: @fontsize-large;
                }
            }
        }
    }
    .detail-close{
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        .iconfont{
            font-size: @fontsize-large-xxxx;
        }
    }
</style>